<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单Excel导出测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        button { padding: 15px 30px; margin: 10px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
    </style>
</head>
<body>
    <h1>简单Excel导出测试</h1>
    
    <button onclick="testExport()">测试Excel导出</button>
    
    <div id="result" class="result">点击按钮开始测试...</div>

    <script>
        // 动态加载XLSX库
        function loadXLSX() {
            return new Promise((resolve, reject) => {
                if (typeof XLSX !== 'undefined') {
                    resolve(XLSX);
                    return;
                }

                const script = document.createElement('script');
                script.src = './xlsx.full.min.js';
                script.onload = () => {
                    if (typeof XLSX !== 'undefined') {
                        console.log('XLSX库加载成功');
                        resolve(XLSX);
                    } else {
                        reject(new Error('XLSX库加载后仍然未定义'));
                    }
                };
                script.onerror = (error) => {
                    console.error('XLSX库加载失败:', error);
                    reject(new Error('XLSX库文件加载失败'));
                };
                document.head.appendChild(script);
            });
        }

        function log(message, isError = false) {
            const resultDiv = document.getElementById('result');
            const className = isError ? 'result error' : 'result success';
            resultDiv.className = className;
            resultDiv.innerHTML = message;
            console.log(message);
        }

        async function testExport() {
            try {
                log('正在加载XLSX库...');
                
                // 加载XLSX库
                const XLSX = await loadXLSX();
                log(`XLSX库加载成功！版本: ${XLSX.version || '未知'}`);
                
                // 创建测试数据
                const data = [
                    ['姓名', '年龄', '城市'],
                    ['张三', 25, '北京'],
                    ['李四', 30, '上海'],
                    ['王五', 28, '广州']
                ];

                // 创建工作簿
                const workbook = XLSX.utils.book_new();
                const worksheet = XLSX.utils.aoa_to_sheet(data);
                XLSX.utils.book_append_sheet(workbook, worksheet, 'TestSheet');

                // 生成文件名
                const fileName = `test_export_${Date.now()}.xlsx`;
                
                // 使用Blob方式导出
                const workbookOutput = XLSX.write(workbook, {
                    bookType: 'xlsx',
                    type: 'array'
                });
                
                const blob = new Blob([workbookOutput], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });
                
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', fileName);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);

                log(`✅ Excel文件导出成功！<br>文件名: ${fileName}<br>数据行数: ${data.length}<br>请检查下载文件夹`);
                
            } catch (error) {
                log(`❌ 导出失败: ${error.message}<br>错误详情: ${error.stack}`, true);
                console.error('Export error:', error);
            }
        }
    </script>
</body>
</html> 